import React from 'react';
import Immutable from 'immutable';
import PropTypes from 'prop-types';
import BaseComponent from '../common/baseComponent.js';
// import toast from '../../utils/toast';
import shLogo from '../../../assets/images/station/marker_sh.png';
import shellLogo from '../../../assets/images/station/marker_shell.png';
import { debounced } from '../../utils/func';

const w = 183 / 6;
const h = 242 / 6;

class Map extends BaseComponent {
  static propsTypes = {
    stationList: PropTypes.instanceOf(Immutable.List).isRequired,
    center: PropTypes.array,
    selectFunc: PropTypes.func.isRequired,
    geoData: PropTypes.instanceOf(Immutable.Map).isRequired,
    distance: PropTypes.string,
  }

  iconSh = new AMap.Icon({
    size: new AMap.Size(w, h), // 图标尺寸
    image: shLogo, // Icon的图像
    // imageOffset: new AMap.Pixel(-0, -10), // 图像相对展示区域的偏移量，适于雪碧图等
    imageSize: new AMap.Size(w, h), // 根据所设置的大小拉伸或压缩图片
  })

  iconShell = new AMap.Icon({
    size: new AMap.Size(w, h), // 图标尺寸
    image: shellLogo, // Icon的图像
    // imageOffset: new AMap.Pixel(-0, -10), // 图像相对展示区域的偏移量，适于雪碧图等
    imageSize: new AMap.Size(w, h), // 根据所设置的大小拉伸或压缩图片
  })

  iconShBig = new AMap.Icon({
    size: new AMap.Size(w * 1.3, h * 1.3), // 图标尺寸
    image: shLogo, // Icon的图像
    // imageOffset: new AMap.Pixel(-0, -10), // 图像相对展示区域的偏移量，适于雪碧图等
    imageSize: new AMap.Size(w * 1.3, h * 1.3), // 根据所设置的大小拉伸或压缩图片
  })

  iconShellBig = new AMap.Icon({
    size: new AMap.Size(w * 1.3, h * 1.3), // 图标尺寸
    image: shellLogo, // Icon的图像
    // imageOffset: new AMap.Pixel(-0, -10), // 图像相对展示区域的偏移量，适于雪碧图等
    imageSize: new AMap.Size(w * 1.3, h * 1.3), // 根据所设置的大小拉伸或压缩图片
  })

  componentDidMount() {
    this.map = new AMap.Map(this.container, {
      resizeEnable: true,
      zoom: 13,
      // center: this.props.center,
    });
    AMap.plugin('AMap.ToolBar', () => {
      this.map.addControl(new AMap.ToolBar({
        // autoPosition: true,
        locate: true,
      }));
    });
    this.updateMap();
    this.updateCenter();
    this.updateCircle();

    // this.map.plugin('AMap.Geolocation', () => {
    //   const geolocation = new AMap.Geolocation({
    //     // 是否使用高精度定位，默认：true
    //     enableHighAccuracy: true,
    //     // 设置定位超时时间，默认：无穷大
    //     timeout: 10000,
    //     // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
    //     buttonOffset: new AMap.Pixel(10, 20),
    //     //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    //     zoomToAccuracy: true,
    //     //  定位按钮的排放位置,  RB表示右下
    //     buttonPosition: 'RB',
    //   });
    // });
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.stationList && nextProps.stationList !== this.props.stationList) {
      this.updateMap();
    }

    if (nextProps.geoData !== this.props.geoData) {
      this.updateCenter();
    }

    if (nextProps.distance !== this.props.distance) {
      this.updateCircle();
    }
  }

  updateCircle = debounced(() => {
    const { distance } = this.props;
    if (distance) {
      if (!this.circle) {
        this.circle = new AMap.Circle({
          center: this.map.getCenter(),
          radius: distance,
          fillColor: 'red',
          fillOpacity: 0.1,
          strokeColor: '#fff', // 描边颜色
          strokeWeight: 2,
        });
        this.map.add(this.circle);
      } else {
        this.circle.setRadius(distance);
      }
    }
  }, 300)

  updateCenter = debounced(() => {
    const { geoData } = this.props;
    if (geoData.get('latitude')) {
      this.map.setCenter(new AMap.LngLat(geoData.get('longitude'), geoData.get('latitude')));
      // const marker = new AMap.Marker({
      //   position: this.map.getCenter(),
      //   offset: new AMap.Pixel(-10, -10),
      //   icon: this.iconSh,
      //   title: '测试',
      // });
      // this.map.add(marker);
    }
  }, 300);

  updateMap = debounced(() => {
    const { stationList, selectFunc } = this.props;
    if (this.markList) {
      this.selectedMarker = null;
      this.map.remove(this.markList);
    }
    this.markList = stationList.map((station, index) => {
      const marker = new AMap.Marker({
        position: new AMap.LngLat(station.get('lng'), station.get('lat')),
        offset: new AMap.Pixel(-10, -10),
        icon: station.get('mchId') === '66' ? this.iconShell : this.iconSh,
        title: station.get('name'),
        topWhenClick: true,
        zoom: 13,
        extData: station.get('mchId'),
      });
      // marker.setIcon(station.get('mchId') === '66' ? this.iconShell : this.iconSh);
      marker.on('click', () => {
        selectFunc(index);
        if (this.selectedMarker) {
          this.selectedMarker.setIcon(this.selectedMarker.getExtData() === '66' ? this.iconShell : this.iconSh);
        }
        this.selectedMarker = marker;
        this.selectedMarker.setIcon(this.selectedMarker.getExtData() === '66' ? this.iconShellBig : this.iconShBig);
      });
      return marker;
    }).toJS();
    console.log('maker list', this.markList);
    this.map.add(this.markList);
  }, 800);

  render() {
    return <div className="map" ref={container => this.container = container} />;
  }
}

export default Map;
